
*{
    margin: 0;
    padding: 0;
}
.tabs{
    width: 350px;
    height: 40px;
    margin: 50px auto 0;
}
.order-wrapper{
    /* 弹性布局 */
    display: flex;
    /* 上下对齐 */
    align-items: center;
    background-color: #fdf6f6;
}
.order-wrapper>.title-bar{
    display: inline-block;
    width: 5px;
    height: 30px;
    background-color: red;
}
.order-wrapper>.title-conten{
    width: 100%;
    height: 40px;
    display: flex;
    /* 两边对齐 */
    justify-content: space-between;
    /* 上下对齐 */
    align-items: center;
    padding: 0 20px;
}
.order-wrapper>.title-conten>h3{
    color: red;
}
.order-wrapper>.title-conten>a{
    text-decoration: none;
    color: #999999;
    font-size: 12px;
}

/* 导航样式 */

.nav>ul{
    /* 取消无序ul的小点点 */
    list-style: none;
    display: flex;
    justify-content: space-around;
    height: 40px;
    align-items: center;
    border-bottom: 1px solid #666666;
}
.nav>ul>li{
    font-size: 12px;
}
.nav>ul>li>span{
    /* 鼠标变小手 */
    cursor: pointer;
}
.nav>ul>li>span.selected{
    background-color: #f46b6b;
    color: #fff;
    border-radius: 5px;
    padding: 0px 4px;
}

/* 组件样式 */

.tab{
    /* 清除ul小点点 */
    list-style: none;
}
.tab>li{
    display: flex;
    /* 左右对齐 */
    justify-content: space-between;
    /* 上下对齐 */
    align-items: center;
    height: 90px;
}
.tab>li>.left-info{
    display: flex;
}
.tab>li>.left-info>img{
    width: 100px;
    height: 60px;
}
.tab>li>.left-info>.info{
    margin-left: 20px;
}
.tab>li>.left-info>.info>p{
    font-size: 10px;
    color: red;
    margin-top: 10px;
}
.tab>li>.right-info{
    background-color: #ffdfdf;
    color: red;
    border-radius: 10px;
    font-size: 8px;
    padding: 5px 10px;
}